// 循环实现动态样式
// #{xxx}：字符串  $xx：数值
// 颜色 ********************************************
//
$magin: 10px;
$white: #fff; //白色
$black: #000; //黑色
$text: #333; //文本
$primary: #3f61f1; //主色
$primary3: #768fff; //主色
$success: #24a151; //正确
$warning: #f0ad4e; //警告
$error: #e13335; //错误
$info: #909399; //禁用
$violet: #9f1bd3; //紫色
$disable: #c0c0c0; //禁用
$border: #dcdfe6; //边框
$border1: #dcdfe6; //边框
$grey: #999aaa; //提示文本
$bg: #f2f4f5; //背景颜色
$lightgrey: #e1e7ff;
$placeholder: #d9d9d9;
$hover: #eaf1ff;
$mask: rgba(
  $color: #000000,
  $alpha: 0.5,
);
$whiteMask: rgba(
  $color: #ffffff,
  $alpha: 0.2,
);
$blackMask: rgba(
  $color: #333,
  $alpha: 0.06,
);
$colors: (
  'white': #{$white},
  'black': #{$black},
  'primary': #{$primary},
  'success': #{$success},
  'warning': #{$warning},
  'error': #{$error},
  'disable': #{$disable},
  'border': #{$border},
  'bg': #{$bg},
  // 辅助灰色，如加载更多的提示信息
  'grey': #{$grey},
  'info': #{$grey},
  // 浅灰色
  'lightgrey': #{$lightgrey},
  'placeholder': #{$placeholder},
  // 点击状态颜色
  'hover': #{$hover},
  // 遮罩颜色
  'mask': #{$mask},
  'blackMask': #{$blackMask},
);
@each $key, $value in $colors {
  .text-color-#{$key} {
    color: $value !important;
  }
  .bg-color-#{$key} {
    background-color: $value !important;
  }
}
